import React from 'react';
import {withRouter,} from 'react-router-dom'
import {connect,} from 'react-redux'
import './YQM.css'
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout";
import LocalStorageService from "../../../../utils/LocalStorageService";
import CustomButton from "../../../../shared-components/CustomButton/CustomBotton";
import {copyToClip} from "../../../../utils/copy";
import {Toast} from "antd-mobile";

class YQM extends React.Component {

    constructor(props) {
        super(props)
        this.history = this.props.history
        this.uid = LocalStorageService.get('userid')
        this.state = {
            num: {
                '0': '',
                '1': '',
                '2': '',
                '3': '',
                '4': '',
                '5': '',
            }
        }
    }

    componentDidMount() {
        this.getUserDetail()
    }

    getUserDetail = () => {
        const userDetail = this.props.user.userdetail
        const flag = userDetail.initFlag
        if (flag === 0) {
            const uid = this.uid
            this.props.fetchUserDetail({uid,})
        }
    }

    onYQMInputChange = (e, key) => {

        const v = e.target.value
        const num = this.state.num
        num[key] = v.toUpperCase()
        this.setState({
            num,
        })
        const inputs = this.yqmInputCtn.children
        const i = Number(key)
        if (v.length === 1) {
            if (i < 5) {
                inputs[i + 1].focus()
            } else {
                inputs[i].blur()
            }

        }
    }

    submitYQM = (yqm) => {
        this.props.doSubmitYQM({uid: this.uid, code: yqm,})
    }

    copy = () => {
        const userDetail = this.props.user.userdetail
        const myYqmNum = userDetail.Yqcode
        const copy = copyToClip(myYqmNum)
        if (copy) {
            Toast.info('复制成功')
        } else {
            Toast.info('复制不成功 请手动复制')
        }
    }

    render() {

        const userDetail = this.props.user.userdetail
        const myYqmNum = userDetail.Yqcode
        const used = userDetail.Usedyqcode
        const num = this.state.num
        const keys = Object.keys(num)
        const values = Object.values(num)
        const yqmOk = values.every(v => v.length >= 1)

        const myYqmNumTemplate = myYqmNum.split('').map((char, index) => {
            return <div
                key={index}
                style={{
                    width: '32px',
                    height: '40px',
                    background: 'rgba(51,51,51,0.04)',
                    marginRight: '8px',
                }}
            >
                <span
                    style={{
                        lineHeight: '40px',
                    }}
                >{char}</span>
            </div>
        })

        const inputTemplate = keys.map((key) => {
            return <input
                value={this.state.num[key]}
                onChange={e => this.onYQMInputChange(e, key)}
                key={key}
                style={{
                    width: '32px',
                    height: '40px',
                    background: 'rgba(51,51,51,0.04)',
                    marginRight: '8px',
                    textAlign: 'center',
                }}
            />
        })

        const myYQM = <div
            className='user-info-yqm-ctn'
        >
            <p className='user-info-yqm-title'>
                - 我的邀请码 -
            </p>

            <span className='gray-text'>
                请把以下号码告知你想邀请的用户
            </span>

            <div className='flex-center-align-center yqm-nums-ctn'>
                {myYqmNumTemplate}
            </div>

            <CustomButton
                shadow='0px 6px 10px 0px rgba(33,58,75,0.4)'
                onClick={this.copy}
            >复制</CustomButton>

        </div>


        const YQMInput = <div

            className='user-info-yqm-ctn'
        >
            <p className='user-info-yqm-title'>
                - 填写邀请码 -
            </p>

            <span className='gray-text'>
                新用户填写邀请码可获得奖励
            </span>
            <div className='flex-center-align-center yqm-nums-ctn' ref={ref => this.yqmInputCtn = ref}>
                {inputTemplate}
            </div>

            <CustomButton
                bg={yqmOk ? '' : '#E8E8E8'}
                shadow={yqmOk ? '0px 6px 10px 0px rgba(33,58,75,0.4)' : ''}
                onClick={yqmOk ? () => this.submitYQM(values.join('')) : () => {}}
            ><span style={{color: yqmOk ? '#fff' : 'rgba(51,51,51,1)'}}>提交</span></CustomButton>

        </div>

        return <GoBackLayout
            history={this.history}
            title='邀请码'
        >
            {myYQM}
            {used ? null : YQMInput}
        </GoBackLayout>
    }

}

const mapState = state => ({
    user: state.user,
})

const mapDispatch = dispatch => ({
    fetchUserDetail: (id) => dispatch.user.fetchUserDetail(id),
    doSubmitYQM: (payload) => dispatch.task.doSubmitYQM(payload)
})

export default connect(mapState, mapDispatch)(withRouter(YQM))
